<template>
  <section class="homepage-statistics">
    <div class="section-header">
      <div class="section-title">
        找茶籽指数
      </div>
      <div class="section-sub-title">
        · 每天9:30-10:30更新价格，12:00、16:30更新景气指数，请及时刷新查看！
      </div>
    </div>
    <div class="section-content">
      <div class="left">
        <div class="left-header">
          <span class="header-title">价格指数

          </span>
        </div>
        <div class="left-list">
          <homepage-echarts></homepage-echarts>
        </div>
      </div>
      <div class="mid" >
        <div class="mid-header">
          <div class="mid-title">
            <img class="title-pointer" src="../../../assets/front/img/phone.png">
            <span class="province" @click="triggerProvinceSelector()">{{activeProvince.name}} <img src="../../../assets/front/img/more_unfold.svg"></span>
            <div v-if="selectingProvince" class="province-selector">
              <div v-for="(item,index) in area" :key="index" class="province-selector-option"
              @click="handleChangeProvince(index)">
                {{item.name}}
              </div>
            </div>
          </div>
          <div class="city-list">
            <div class="city" @click="triggerCitySelector()">{{activeCity.name}} <img src="../../../assets/front/img/more_unfold.svg"></div>
            <div v-if="selectingCity" class="city-selector">
              <div v-for="(item,index) in cities" :key="index" class="city-selector-option"
              @click="handleClickCity(item,index)">
                {{item.name}}
              </div>
            </div>
          </div>
        </div>
        <div class="mid-content">
          <div class="row green">
            <div class="name">青果</div>
            <div class="yesterday">
              <div>昨天 &nbsp;{{qingGuoPrice.yesterdayPrice}}</div>
              <div :class="qingGuoPrice.todayPrice-qingGuoPrice.yesterdayPrice>=0?'red':'green'">{{qingGuoPrice.todayPrice-qingGuoPrice.yesterdayPrice>=0?'+':'-'}}&nbsp;{{qingGuoPrice.todayPrice-qingGuoPrice.yesterdayPrice}}</div>
            </div>
            <div class="today green">
              {{qingGuoPrice.todayPrice}}
            </div>
          </div>
          <div class="row red">
            <div class="name">干籽</div>
            <div class="yesterday">
              <div>昨天&nbsp;{{ganZiPrice.yesterdayPrice}}</div>
              <div :class="ganZiPrice.todayPrice-ganZiPrice.yesterdayPrice>=0?'red':'green'">{{ganZiPrice.todayPrice-ganZiPrice.yesterdayPrice>=0?'+':'-'}}&nbsp;{{Math.abs(ganZiPrice.todayPrice-ganZiPrice.yesterdayPrice)}}</div>
            </div>
            <div class="today red">
              {{ganZiPrice.todayPrice}}
            </div>
          </div>
        </div>
      </div>
      <div class="right">
          <img src="../../../assets/front/img/example.png">
      </div>
    </div>
    <div v-if="selectingCity||selectingProvince" class="x-mask" @click="hideMask()"></div>
  </section>
</template>

<script>
import HomepageEcharts from './HomepageEcharts';
import HomepageAPI from '@/api/homepage/homepage';
export default {
    components: {
        HomepageEcharts
    },
    data() {
        return {
            selectingProvince: false,
            selectingCity: false,
            area: [],
            activeProvinceIndex: null,
            activeCityIndex: null,
            price: []
        };
    },
    computed: {
        activeProvince() {
            return this.area[this.activeProvinceIndex] || {};
        },
        cities() {
            return this.area[this.activeProvinceIndex] ? this.area[this.activeProvinceIndex].children : [];
        },
        activeCity() {
            return this.cities[this.activeCityIndex] || {};
        },
        qingGuoPrice() {
            if (this.price.length === 2) {
                return this.price[0];
            } else {
                return {
                    todayPrice: 0,
                    yesterdayPrice: 0
                };
            }
        },
        ganZiPrice() {
            if (this.price.length === 2) {
                return this.price[1];
            } else {
                return {
                    todayPrice: 0,
                    yesterdayPrice: 0
                };
            }
        }
    },
    mounted() {
        this.getArea();
    },
    methods: {
        getArea() {
            HomepageAPI.getPriceArea()
                .then(res => {
                    this.area = res.obj;
                    if (this.area.length > 0) {
                        this.activeProvinceIndex = 0;
                        if (this.area[0].children.length > 0) {
                            this.activeCityIndex = 0;
                            this.getPrice(this.area[0].children[0].areaId);
                        }
                    }
                });
        },
        triggerCitySelector() {
            this.selectingProvince = false;
            this.selectingCity = !this.selectingCity;
        },
        triggerProvinceSelector() {
            this.selectingCity = false;
            this.selectingProvince = !this.selectingProvince;
        },
        hideMask() {
            this.selectingCity = false;
            this.selectingProvince = false;
        },
        handleChangeProvince(index) {
            this.activeProvinceIndex = index;
            this.selectingProvince = false;
            this.activeCityIndex = 0;
            this.getPrice(this.selectingProvince.children[0].areaId);
        },
        handleClickCity(item, index) {
            this.activeCityIndex = index;
            this.selectingCity = false;
            this.getPrice(item.areaId);
        },
        getPrice(areaId) {
            HomepageAPI.getAreaShowPrice(areaId)
                .then(res => {
                    this.price = res.obj;
                });
        }

    }
};
</script>

<style lang="scss">
  @import "../../../assets/front/front";

  .homepage-statistics {
    .x-mask {
      position: fixed;
      top:0;
      left:0;
      width: 100vw;
      height:100vh;
      z-index: 1000;
    }
    .section-header {
      padding-left:5px;
      height:60px;
      display: flex;
      align-items: center;
      .section-title {
        font-size: 22px;
      }
      .section-sub-title{
        margin-left:60px;
        font-size: 12px;
        font-family: SimSun,serif;
        color: $font-gray-color ;
      }
    }
    .section-content {
      height:300px;
      display: flex;
      justify-content: space-between;
      >.left{
        width:427px;
        background-color: white;
        border: 1px solid $bg-color;
        .left-header {
          padding:0 10px;
          height:50px;
          display: flex;
          justify-content: space-between;
          align-items: center;
          border-bottom: 1px solid $bg-color;

          .header-title {
            color:#8b8b8b;
            font-size: 14px;
          }
          .header-total {
            font-size: 22px;
            color: #646464;
          }
          .header-today {
            font-size: 12px;
            color: #aaaaaa;
          }
          .header-perform {
            padding:4px 10px 4px 15px;
            color: #fff;
            background: url("../../../assets/front/img/info.png") no-repeat;
            background-size: cover;
          }
        }
        .left-list {
          padding:10px 0;
          height:250px;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: space-around;
          .legend-icon{
            width:10px;
            height:10px;
            display: inline-block;
            border-radius: 50%;
            background: #58c388;
          }
          .province-counts{
            width:215px;
            .city-name {
              text-align: center;
              font-size: 12px;
              letter-spacing: 2px;
              color: #646464;
            }
            .progress {
              margin-top:4px;
              height: 6px;
              background: $bg-color;
              border-radius: 3px;
              .progress-fill {
                height:100%;
                background-color: #8b8b8b;
                border-radius: 3px;
              }
            }
          }
        }
      }
      >.mid {
        width: 535px;
        background-color: white;
        border: 1px solid $bg-color;

        .mid-header {
          position: relative;
          height:50px;
          display: flex;
          align-items: center;
          border-bottom: 1px solid $bg-color;
          .mid-title{
            width:135px;
            @include flex-center;
            font-size: 14px;
            color: #646464;
          }
          .title-pointer {
            height:18px;
          }
          .province {
            margin-left:5px;
            padding:2px 5px;
            border-radius: 5px;
            color: white;
            background-color: $main-color;
            >img {
              width:14px;
              color:white;
            }
          }
          .province-selector {
            position: absolute;
            top: 40px;
            left: 50px;
            padding:10px;
            width:300px;
            background-color: #aaa;
            display: flex;
            flex-wrap: wrap;
            border-radius: 10px;
            z-index:1001;
          }
          .province-selector-option {
            width:33%;
            height:40px;
            line-height: 40px;
            text-align: center;
            color: black;
          }
          .city-list {
            width:400px;
            @include flex-center;
            justify-content: flex-end;
            font-size: 12px;
            color: #646464;
            .city {
              margin-right: 20px;
              height:50px;
              display: flex;
              align-items: center;
            }
            .city>img{
              width:14px;
              border: 1px solid $bg-color;
            }
            .city-selector {
              position: absolute;
              top: 40px;
              right: 0;
              padding:10px;
              width:300px;
              background-color: #aaa;
              display: flex;
              flex-wrap: wrap;
              border-radius: 10px;
              z-index:1001;
            }
            .city-selector-option {
              width:33%;
              height:40px;
              line-height: 40px;
              text-align: center;
              color: black;
            }
          }
        }
        .mid-content {
          height:100%;
          padding: 0 50px;
          .row {
            padding: 0 30px;
            height:125px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            .green {
              color:#009040;
            }
            .red {
              color:#bf0008;
            }
            .name {
              color:#333;
              font-size: 28px;
            }
            .yesterday {
              text-align: right;
            }
            .today {
              font-size: 38px;
              font-weight: bold;
            }
            &+.row {
              border-top: 1px solid #aaa;
            }
          }
        }
      }
      >.right{
        width:210px;
        background-color: white;
        border: 1px solid $bg-color;

      }
    }
  }



</style>
